<template>
    <uv-popup ref="popup" mode="right" :safeAreaInsetTop="false" zIndex="10075" bgColor="#101F43">
        <view class="box">
            <view class="title">{{ $t('public.语言选择') }}</view>
            <view class="list_box">
                <view class="item flex-align-center" v-for="(item, index) in list" :key="index"
                    @click="changeLocale(item)">
                    <uv-icon :name="item.img" size="30"></uv-icon>
                    <text class="name" :style="item.value == getLocale() ? 'color:#fff' : ''">{{ item.name }}</text>
                </view>
            </view>
        </view>
    </uv-popup>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import i18n from '@/locale';
const popup = ref(null);
const list = ref([
    { name: "CN", img: "/static/public/zh-Hans.png", value: "zh-Hans" },
    { name: "HK", img: "/static/public/zh-Hant.png", value: "zh-Hant" },
    { name: "EN", img: "/static/public/en.png", value: "en" },
]);
// 获取当前语言
const getLocale = () => {
    return uni.getLocale();
}
// 切换语言
const changeLocale = (item) => {
    uni.setLocale(item.value);
    i18n.global.locale = item.value;
}
defineExpose({
    open: () => popup.value.open(),
})
</script>
<style lang="scss" scoped>
.box {
    width: 30vw;
    padding-top: 100rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    background-color: #101F43;
    height: 100%;

    .title {
        text-align: center;
    }

    .list_box {
        margin-top: 60rpx;

        .item {
            margin-bottom: 40rpx;

            .name {
                margin-left: 20rpx;
                color: #959595;
            }
        }
    }
}
</style>
